I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on.
And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on.
And that's why you'll commonly see this calculation to do horizontal effects.
xPercent: -100 * (sections.length - 1),
We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is.
First off, that section is not being pinned. What is being pinned is the trigger you set here.
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".main-container", // this is what gets pinned
pin: true,
scrub: 0.1,
end: "+=2000"
}
})
Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem.
So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen.
horizontal animation (codepen.io)
And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger.
horizontal animation (codepen.io)
So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here.
tl.to('.list-left ul', {
scrollTrigger: { // !!! you should never have a nested ScrollTrigger
trigger: '.list-left ul',
start: "83% center",
scrub: true,
markers: true,
},
...
})
See the most Common ScrollTrigger Mistakes for more information.
And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.